<template>
  <div class="tutoring-pay-modal" v-if="visible">
    <div class="modal-content" v-loading="payLoading">
      <div class="modal-header">
        <div class="modal-titel">名师1对1辅导预约台</div>
        <span class="close-btn" @click="handleClose">×</span>
      </div>
      
      <div class="tutor-info">
        <div class="avatar" :style="{ backgroundImage: `url(${tutorInfo.avatar})` }"></div>
        <div class="info">
          <div class="name">
            {{ tutorInfo.name }}
            <span v-for="(tag, index) in tutorInfo.tags" :key="index" class="tag">{{ tag }}</span>
          </div>
          <div class="description">{{ tutorInfo.description }}</div>
        </div>
      </div>

      <div class="product-info">
        <div class="info-content">
            <el-input
              v-model="textarea2"
              style="width: 100%"
              :autosize="{ minRows: 4, maxRows: 6 }"
              type="textarea"
              placeholder="产品说明"
            />
        </div>
      </div>

      <div class="booking-details">
        <div class="hours-selector">
          <span>预约小时数 ({{ tutorInfo.price }}元/小时)：</span>
          <div class="number-input">
            <el-input-number v-model="hours" :min="1" @change="handleChange" />

            <!-- <button @click="decreaseHours">-</button>
            <input type="number" v-model="hours" min="1" />
            <button @click="increaseHours">+</button> -->
          </div>
        </div>

        <div class="time-selector">
          <span>预约首次上课时间：</span>
 
          <el-date-picker
            v-model="selectedDate"
            type="date"
            placeholder="选择日期"
            :clearable="false"
            class="year-picker"
            value-format="x"
          />
        </div>
      </div>

      <div class="payment-footer">
        <div class="total">
          计：<span class="price">¥{{ (tutorInfo.price * hours).toFixed(2) }}</span>
        </div>
        <button class="pay-btn" @click="handlePay">去付款</button>
      </div>
    </div>
  </div> 
  <div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  tutorInfo: {
    type: Object,
    required: true
  },
  payLoading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'onPay'])
const textarea2=ref('')
const hours = ref(1)
const selectedDate = ref()

const handleClose = () => {
  emit('update:visible', false)
}

const handlePay = () => {
  emit('onPay', {
    hours: hours.value,
    selectedTime: selectedDate.value / 1000,
    totalAmount: props.tutorInfo.price * hours.value
  })
}

const handleChange = () => {
  console.log(hours.vlaue,'----')
}

</script>

<style lang="scss" scoped>
.year-picker {
  :deep(.el-input__wrapper) {
    border-radius: 8px;
    border-color: #EEEEEE;
  }
}
.tutoring-pay-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
    .modal-titel{
 width:100%;
 
font-size: 18px;
font-weight: 600;
line-height: 25.2px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;

    }
  .modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    padding: 20px;

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      h3 {
        margin: 0;
        font-size: 18px;
        color: #333;
      }

      .close-btn {
        font-size: 24px;
        cursor: pointer;
        color: #999;
      }
    }

    .tutor-info {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;

      .avatar {
        width: 48px;
        height: 68px;
        background-size: cover;
        background-position: center;
        border-radius: 8px;
        background: #D9D9D9;


      }

      .info {
        .name {
          font-size: 14px;
          color: #333;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 8px;
        

          .tag {
            font-size: 12px;
            color: var(--main-color);
            background: #1269831A;
            padding: 2px 8px;
            border-radius: 4px;
          }
        }

        .description {
          font-size: 12px;
          color: #666;
          font-weight:400;
          line-height: 16.8px;
        }
      }
    }

    .product-info {
    //   margin-bottom: 20px;

    //   padding:13px 10px;
    // border-radius:8px;
    // border:1px solid #EEEEEE;
    //   h4 {
    //     font-size: 14px;
    //     color: #333;
        margin-bottom: 20px;
    //   }

    //   .info-content {
    //     background:#fff;
    //     border-radius: 8px;
    //     min-height: 80px;
    //     padding: 10px;
    //   }
    }

    .booking-details {
      .hours-selector, .time-selector {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        margin-bottom: 20px;
        
        span {
          font-size: 14px;
          color: #333;
          font-weight: 400;
        }

        .number-input {
          display: flex;
          align-items: center;
          
          button {
            width: 28px;
            height: 28px;
            border: 1px solid #ddd;
            background: white;
            cursor: pointer;
          }

          input {
            width: 50px;
            height: 28px;
            text-align: center;
            border: 1px solid #ddd;
            margin: 0 -1px;
          }
        }

        select {
          width: 200px;
          height: 32px;
          border: 1px solid #ddd;
          border-radius: 4px;
          padding: 0 10px;
        }
      }
    }

    .payment-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;

      .total {
        font-size: 14px;
        
        .price {
          color: #E52121;
          font-size: 24px;
          font-weight: bold;
        }
      }

      .pay-btn {
        background: var(--main-color);
        color: white;
        border: none;
        padding: 8px 24px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;

        &:hover {
          opacity: 0.9;
        }
      }
    }
  }
}
</style>
